<template>
  <div class="dashboard">
    <!-- 头部 -->
    <el-row :gutter="12">
      <template v-for="item in goodsAmount" :key="item.amount">
        <el-col :span="6" :sm="12" :xs="24" :md="8" :lg="6">
          <echarts-count v-bind="item" />
        </el-col>
      </template>
    </el-row>

    <!-- 中间的图表 -->
    <el-row :gutter="12">
      <el-col :span="8" :sm="24" :xs="24" :md="8">
        <echart-card>
          <pie-echarts :pieData="goodsCateorys" />
        </echart-card>
      </el-col>
      <el-col :span="8" :sm="24" :xs="24" :md="8">
        <echart-card>
          <map-echarts :map-data="goodsAddress" />
        </echart-card>
      </el-col>
      <el-col :span="8" :sm="24" :xs="24" :md="8">
        <echart-card>
          <rose-echarts :roseData="goodsCateorys" />
        </echart-card>
      </el-col>
    </el-row>

    <!-- 下方图表 -->
    <el-row :gutter="12">
      <el-col :span="12" :sm="24" :xs="24" :md="12">
        <echart-card>
          <line-echarts :line-data="goodsSale" />
        </echart-card>
      </el-col>
      <el-col :span="12" :sm="24" :xs="24" :md="12">
        <echart-card>
          <columnar-echarts :columnar="goodsFavor" />
        </echart-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import echartsCount from './cpns/echarts-count.vue'
import echartCard from './cpns/echart-card.vue'
import { PieEcharts, LineEcharts, RoseEcharts, ColumnarEcharts } from '@/components/page-echarts'
import { computed } from 'vue'
import useEcharts from '@/store/modules/echart'
const echartsStore = useEcharts()
echartsStore.fetchGoodAmount()
const { goodsAmount, goodsCategorySale, goodsCategoryFavor, goodsAddressSale } =
  storeToRefs(echartsStore)
// 获取数据 需要映射到想要的数据
// 每个分类商品的图表数据
const goodsCateorys = computed(() => {
  return echartsStore.goodsCategoryCount.map((item: any) => {
    return { value: item.goodsCount, name: item.name }
  })
})

// 每个分类商品的销量图表数据
const goodsSale = computed(() => {
  const name = goodsCategorySale.value.map((item: any) => item.name)
  const value = goodsCategorySale.value.map((item: any) => item.goodsCount)
  return { value, name }
})

// 每个分类商品的收藏数据
const goodsFavor = computed(() => {
  const name = goodsCategoryFavor.value.map((item: any) => item.name)
  const value = goodsCategoryFavor.value.map((item: any) => item.goodsFavor)
  return { name, value }
})

// 地图的数据
const goodsAddress = computed(() => {
  return goodsAddressSale.value.map((item: any) => ({
    name: item.address,
    value: item.count
  }))
})
</script>

<style lang="less" scoped></style>
